<template>
	<view class="padding30rpx">
		<view class="padding30rpx flexc align-items met">
			<image class="image" :src="user.headimg"></image>
			<view>
				<view class="fontSize40rpx" style="color: #FFFFFF;">{{user.likename}}</view>
				<view class="dis" style="margin-top: 15rpx;">
					<!-- {{产品经理}} -->
					<view v-if="user.address != null" class="dis align-items"
						style="align-items: center; margin-left: 25rpx;">
						<image class="user-lv-center-ding" src="../static/ding.png"></image>
						<text>北京</text>
					</view>
				</view>
				<view style="margin-top: 5rpx;">{{user.characters}}</view>
			</view>
		</view>
		<view class="dis line" style="padding: 30rpx 0;">
			<view></view>
			<view class="hui66" @click="record">
				查看交易记录
				<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
			</view>
		</view>
		<view class="dis line align-items" style="padding: 30rpx 0;">
			<view class="flexc align-items">
				<view class="fontSize32rpx" style="font-weight: bold;">平台会员</view>
				<text style=" color: #4CACD4;font-size: 24rpx;margin:0 15rpx;" @click="tan = true">查看介绍和权益</text>
				<image style="width: 32rpx;height: 32rpx;" src="../static/wen.png"></image>
			</view>
			<view v-if="user.yesNo">

				<view class="met-btn" @click="chong">前往充值</view>
			</view>
		</view>
		<view class="dis line" style="padding: 30rpx 0;">
			<view class="flexc align-items">
				<view class="fontSize32rpx" style="font-weight: bold;">岗位会员</view>
				<text style=" color: #4CACD4;font-size: 24rpx;margin:0 15rpx;" @click="tan1 = true">查看介绍和权益</text>
				<image style="width: 32rpx;height: 32rpx;" src="../static/wen.png"></image>
			</view>
			<view></view>
		</view>



		<view class=" line" @click.stop="showBTN(item)" v-for="(item,index) in list" :key="index">
			<view class="dis">
				<view class="fontSize32rpx" style="font-weight: bold;">{{item.departmentName}}</view>
				<u-icon v-show="item.show" name="arrow-right" color="#999999" size="28"></u-icon>
				<u-icon v-show="!item.show" name="arrow-down" color="#999999" size="28"></u-icon>
			</view>
			<view v-show="!item.show">
				<!-- {{item.tstationList}} -->
				<view class="dis" style="padding: 15rpx 0;" v-for="(i,k) in item.tstationList" :key="k">
					<view class="hui66 u-flex">{{i.jname}}
						<u-icon v-if="i.status" class="u-m-l-10" size="40" name="/static/images/vipicom.png"></u-icon>
					</view>
					<view class="dis">
						<view class="met-btn1" @click.stop="qie(i)">切换登录</view>
						<view class="met-btn" @click.stop="liji(i)">立即{{i.status?'续费':'开通'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<button @click="existing">查看现有会员</button>
		</view>
		<u-popup mode="center" v-model="tan" width="550">
			<view class="mdx-center-xs  margin-top25rpx u-p-t-20">
				<view style="font-size: 32rpx;color: #ffa995; ">平台会员介绍：</view>
				<u-parse :html="vipInfo.ptjs"></u-parse>
			</view>
			<view class="mdx-center-xs  u-m-t-20 u-m-b-30">
				<view style="font-size: 32rpx;color: #ffa995; ">平台会员权益：</view>

				<u-parse :html="vipInfo.gwqy"></u-parse>
			</view>
		</u-popup>
		<u-popup mode="center" v-model="tan1" width="550">
			<view class="mdx-center-xs  margin-top25rpx u-p-t-20">
				<view style="font-size: 32rpx;color: #ffa995; ">岗位会员介绍：</view>
				<u-parse :html="vipInfo.ptqy"></u-parse>
			</view>
			<view class="mdx-center-xs  u-m-b-30 u-m-t-20">
				<view style="font-size: 32rpx;color: #ffa995; ">岗位会员权益：</view>
				<u-parse :html="vipInfo.gwjs"></u-parse>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tan: false,
				tan1: false,
				list: [],
				// user: {}
				vipInfo: {
					ptjs: '',
					ptqy: '',
					gwjs: '',
					gwqy: ''
				}
			}
		},
		onLoad() {
			// this.user = uni.getStorageSync('user')
			this.selectPostMembers()
		},
		computed: {
			user() {
				return this.$store.state['userinfo']
			},
			// userInfo() {
			// 	return this.$store.state['userinfo']
			// }
		},
		// computed: {
		// 	userInfo() {
		// 		return this.$store.state['userinfo']
		// 	}
		// },
		methods: {
			selectPostMembers() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/PostController/selectPostMembers',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 200) {
							// this.vipInfo.ptjs=res.data.introduce
							// this.vipInfo.ptqy=res.data.introducePost
							// this.vipInfo.gwjs=res.data.rightPost
							// this.vipInfo.gwjs=res.data.rightS
							this.vipInfo = {
								ptjs: res.data.data.introduce,
								ptqy: res.data.data.introducePost,
								gwjs: res.data.data.rightPost,
								gwqy: res.data.data.rightS
							}
							console.log(this.vipInfo);
							var tp = []


							res.data.data.selectPostMemberDto.forEach((item, index) => {
								var lis = []
								tp.push({
									departmentId: item.departmentId,
									departmentName: item.departmentName,
									show: false,
									tstationList: lis
								})
								item.tstationList.forEach((i, k) => {
									lis.push({
										jname: i.tstation.jname,
										jimge: i.tstation.jimge,
										status: i.status,
										id: i.tstation.id,
										show: false
									})
								})
							})
							this.list = tp
						} else {

						}
					}
				})
			},
			//查看现有会员
			existing() {
				uni.navigateTo({
					url: '/pages/user/existing/existing'
				})
			},
			showBTN(item) {
				item.show = !item.show
			},
			//查看记录
			record() {
				uni.navigateTo({
					url: '/pages/user/record/record'
				})
			},
			//切换登录
			qie(i) {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UserController/updateUserPost',
					data: {
						pid: i.id
					},
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log('切换岗位', res.data)
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '切换成功'
							})
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/study/study'
								})
							}, 1000);
							uni.request({
								method: 'GET',
								url: this.$api + '/app/UserController/addUserPost',
								header: {
									'token': uni.getStorageSync('token')
								},
								success: (rs) => {
									console.log('rs', rs)
									if (rs.data.code == 200) {
										if (rs.data.data.yesno == true) {
											uni.setStorageSync('pid', rs.data.data.pid)
										}
									} else {

									}
								}
							})
						} else {

						}
					}
				})

			},
			//立即开通
			liji(i) {
				console.log('i', i)
				this.$mHelper.to('/pages/study/choice/transaction/transaction?id=' + i.id + '&name=' + i.jname + '&pid=' +
					i.id)

			},
			//充值
			chong() {
				uni.navigateTo({
					url: '../balance/balance'

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	button {
		width: 100%;
		background: #00A29A;
		height: 92rpx;
		margin-bottom: 80rpx;
		margin-top: 120rpx;
		color: #FFFFFF;
	}

	.met-btn {
		width: 170rpx;
		border-radius: 5rpx;
		text-align: center;
		height: 52rpx;
		line-height: 52rpx;
		background: #00A29A;
		color: #FFFFFF;
	}

	.met-btn1 {
		width: 170rpx;
		border-radius: 5rpx;
		text-align: center;
		height: 52rpx;
		line-height: 52rpx;
		color: #00A29A;
		margin-right: 15rpx;
		border: 1rpx solid #00a29a;
	}

	.met {
		background-color: #00A29A;
		border-radius: 10rpx;
		color: #FFFFFF;

		.image {
			width: 164rpx;
			height: 164rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}

	.user-lv-center-ding {
		width: 20rpx;
		height: 24rpx;
		margin-right: 15rpx;
	}
</style>
